<template>
  <div class="page">
    <!-- 功能区 -->
    <div class="function-area">
      <!-- 返回按钮和标题 -->
      <div class="header">
        <button class="back-btn" @click="goBack">
          <img class="arrow" src="@/assets/xiangmujindu/arrow_right.png" style="width: 22px;transform: rotate(180deg);" /></button>
        <h3>新增成员</h3>
      </div>
      <!-- 文本框 -->
      <div v-if="activeTab === 0" class="search-bar" style="position: relative;">
        <input
          type="text"
          placeholder="请输入姓名或手机号查询"
          style="padding-left: 26px;"
        />
        <img src="../assets/xiangmujindu/pg_icon_search.png" style="position: absolute;left: 8px;top: 30px;width: 14px;" alt="" srcset="">
      </div>
    </div>

    <!-- 内容区 -->
    <div class="content-area">
      <!-- 派单内容 -->
      <div v-if="activeTab === 0">
        <!-- 2.3 新增成员 -->
        <div class="assigned-add-user">
          <div class="member-list">
            <div
              v-for="(member, index) in assignedMembers"
              :key="index"
              class="member-item"
            >
              <img src="@/assets/xiangmujindu/icon_phone.png" alt="电话" />
              <span>{{ member.name }}</span>
              <template v-if="index == 1">
                <span class="tp2">{{ member.tp }}</span>
              </template>
              <template v-else>
                <span class="tp">{{ member.tp }}</span>
              </template>
              <button class="adduser-btn" @click="removeMember(index)">
                添加
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      activeTab: 0,
      // 数据
      names: ["刘志飞", "刘宇", "黄桥", "林志杰"],
      assignedMembers: [
        { name: "张辉明 - 137****7229", tp: "自有" },
        { name: "黄冰冰 - 168****2431", tp: "外雇" },
        { name: "张志强 - 185****4383", tp: "自有" },
      ],
      currentWeek: "",
      weekDays: [],
      scheduleNames: ["康永辉", "灯影", "荒废", "刘志杰", "李家栋", "灵芝"],
    };
  },
  created() {
    // 初始化周日期
    this.initWeekDays();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
      // this.$router.push({ name: 'paigongpaiban', params: {id: 1} })
    },
    removeMember(index) {
      alert("添加成功");
      this.assignedMembers.splice(index, 1);
    },
    addMember() {
      alert("新增成员");
    },
    batchAddMember() {
      alert("批量新增成员");
    },
    goToBatchSchedule() {
      alert("跳转至批量排版");
    },
    goToSchedule() {
      alert("跳转至排班页面");
    },
    generateRandomNumber() {
      return Math.floor(Math.random() * 100);
    },
    initWeekDays() {
      const now = new Date();
      const dayOfWeek = now.getDay(); // 当前是周几
      const startOfWeek = new Date(
        now.getTime() - dayOfWeek * 24 * 60 * 60 * 1000
      ); // 本周日
      const days = [];
      for (let i = 0; i < 7; i++) {
        const date = new Date(startOfWeek.getTime() + i * 24 * 60 * 60 * 1000);
        days.push({
          week: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()],
          date: date.getDate(),
        });
      }
      this.currentWeek = `${startOfWeek.getFullYear()}/${
        startOfWeek.getMonth() + 1
      }/${days[0].date} - ${days[6].date}`;
      this.weekDays = days;
    },
  },
};
</script>


<style scoped>
.page {
  font-size: 13px;
  color: #474747;
}

/* 功能区 */
.function-area {
  background-color: white;
  padding: 10px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.back-btn {
  position: absolute;
  left: 0px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
h1 {
  margin: 0;
}

/* Tab 切换 */
.tabs {
  display: flex;
  margin-top: 10px;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 5px 10px;
  cursor: pointer;
  background-color: #f4f5f9;
  color: black;
}
.tab.active {
  background-color: #98c356;
  color: white;
}

/* 文本框 */
.search-bar input {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 22px;
}

/* 内容区 */
.content-area {
  background-color: #f4f5f9;
  padding: 10px;
}
.text-row {
  justify-content: space-between;

  padding: 5px;
}
.text-box {
  padding: 5px;
  border-radius: 20px;
  background-color: white;
  font-size: 10px;
  margin: 5px;
}

/* 分配成员 */
.assigned-members h3 {
  margin-bottom: 5px;
}
.member-list {
  background-color: white;
  border-radius: 5px;
  padding: 5px;
}

.member-list img {
  width: 20px;
  height: 20px;
  margin-right: 15px;
}

.member-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #9d9e9f;
}
.member-item:last-child {
  border-bottom: none;
}

.member-item .tp {
  border: 1px solid;
  border-radius: 5px;
  margin-left: 10px;
  color: #7e974a;
  padding: 0px 5px;
}
.member-item .tp2 {
  border: 1px solid;
  border-radius: 5px;
  margin-left: 12px;
  padding: 0px 5px;
  color: #c9ae5d;
}

.remove-btn {
  margin-left: auto;
  color: #b86250;
  background: none;
  border: none;
  cursor: pointer;
}

.adduser-btn {
  margin-left: auto;
  color: #7e9b4f;
  background: none;
  border: none;
  cursor: pointer;
}

/* 新增成员 */
</style>
